<script>
import {mapGetters, mapState} from "vuex";

export default {
  name: "scrollBrand",
  props: {
    height: {
      type: String,
      default: ""
    },
    scrollY: {
      type: Boolean,
      default: true
    },
    cateList: {
      type: Array,
      default: () => ([])
    }
  },
  computed: {
    ...mapState("categoryStore", ["scrollTop"]),
    ...mapGetters("categoryStore", ["cateListChildren"])
  },
  methods: {
    /* 点击三级分类的回调函数 */
    goProductList(cate) {
      // 携带当前三级分类的IDtiaoz到商品列表页面
      uni.navigateTo({
        url: `/subPackages/productList/productList?cid=${cate.cat_id}`
      })
    }
  },
}
</script>

<template>
  <scroll-view class="scrollBrand" :style="{height}" :scroll-y="scrollY" :scroll-top="scrollTop" scroll-with-animation>
    <view v-for="(cate2,index) in cateListChildren" :key="cate2.cat_id" class="cateItem">
      <view class="cate2Name">-{{ cate2.cat_name }}-</view>
      <view class="cate3List">
        <view class="cate3Item" v-for="(cate3,index) in cate2.children" :key="cate3.cat_id" @click="goProductList(cate3)">
          <image class="cate3Img" :src="cate3.cat_icon"></image>
          <text class="cate3Name">{{ cate3.cat_name }}</text>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<style scoped lang="scss">
.scrollBrand {
  width: 100%;
  height: 100%;

  .cateItem {

    .cate2Name {
      height: 100rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 26rpx;
    }

    .cate3List {
      display: flex;
      flex-wrap: wrap;

      .cate3Item {
        width: 33.33%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 10rpx 0;

        .cate3Img {
          width: 120rpx;
          height: 120rpx;
        }

        .cate3Name {
          font-size: 26rpx;
          font-weight: 400;

        }

      }
    }
  }
}
</style>
